<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>问卷调查</title>
	<link rel="stylesheet" href="style.css" type="text/css">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>//引入jquery文件
	<script src="https://unpkg.com/coco-message/coco-message.min.js"></script>//引入在线弹框插件
</head>

<body>
	<div class="content">
		<h1>大学生熬夜调查问卷</h1>
		<div class="vote">
			<div class="votechoice">
				<ul class="vote1">
					<p>*1.您的性别</p>
					<li><input type="radio" name="sex" value="男" /><span class="votechoicename">男</span>
						<input type="radio" name="sex" value="女" /><span class="votechoicename">女</span>
					</li>
				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote2">
					<p>*2.年龄：</p>
					<li><input type="number" value="18" name="age" /></li>
				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote3">
					<p>*3.您认为晚上最佳入睡时间段为:</p>
					<li><input type="radio" name="during" value="11:00~12:00" /><span class="votechoicename">11:00~12:00</span>
					</li>
					<li><input type="radio" name="during" value="12:00~1:00" /><span class="votechoicename">12:00~1:00</span>
					</li>
					<li><input type="radio" name="during" value="1:00以后" /><span class="votechoicename">1:00以后</span>
					</li>
				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote4">
					<p>*4.您认为到晚上几点仍未入睡才算熬夜：</p>
					<li><input type="radio" name="time" value="11点以后" /><span class="votechoicename">11点以后</span>
					</li>
					<li><input type="radio" name="time" value="12点以后" /><span class="votechoicename">12点以后</span></li>
					<li><input type="radio" name="time" value="1点以后" /><span class="votechoicename">1点以后</span>
					</li>

				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote5">
					<p>*5.您每天的睡眠时间有多久：</p>
					<li><input type="radio" name="type" value="少于6小时" /><span class="votechoicename">少于6小时</span>
					</li>
					<li><input type="radio" name="type" value="6-7小时" /><span class="votechoicename">6-7小时</span>
					</li>
					<li><input type="radio" name="type" value="7-8小时" /><span class="votechoicename">7-8小时</span>
					</li>
					<li><input type="radio" name="type" value="多于8小时" /><span class="votechoicename">多于8小时</span>
					</li>

				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote5">
					<p>*6.您一个星期熬夜多少天：</p>
					<li><input type="radio" name="days" value="不熬夜" /><span class="votechoicename">不熬夜</span>
					</li>
					<li><input type="radio" name="days" value="1-3天" /><span class="votechoicename">1-3天</span>
					</li>
					<li><input type="radio" name="days" value="每天" /><span class="votechoicename">每天</span>
					</li>
				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote5">
					<p>*7.您熬夜的原因(多选)：</p>
					<li><input type="checkbox" name="why" value="学习" /><span class="votechoicename">学习</span>
					</li>
					<li><input type="checkbox" name="why" value="打游戏" /><span class="votechoicename">打游戏</span>
					</li>
					<li><input type="checkbox" name="why" value="做课件" /><span class="votechoicename">做课件</span>
					</li>
					<li><input type="checkbox" name="why" value="失眠" /><span class="votechoicename">做课件</span>
					</li>
				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote5">
					<p>*8.您熬夜后第二天的状态：</p>
					<li><input type="radio" name="state" value="精力依旧旺盛" /><span class="votechoicename">精力依旧旺盛</span>
					</li>
					<li><input type="radio" name="state" value="上课想睡觉" /><span class="votechoicename">上课想睡觉</span>
					</li>
				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote5">
					<p>*9.您认为一天至少睡几个小时才算健康睡眠?</p>
					<li><input type="radio" name="health" value="6小时" /><span class="votechoicename">6小时</span>
					</li>
					<li><input type="radio" name="health" value="7小时" /><span class="votechoicename">7小时</span>
					</li>
					<li><input type="radio" name="health" value="8小时" /><span class="votechoicename">8小时</span>
					</li>
				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote5">
					<p>*10.您认为常常使你熬夜的理由源自哪里?(多选)</p>
					<li><input type="checkbox" name="reason" value="学业上的需要" /><span class="votechoicename">学业上的需要</span>
					</li>
					<li><input type="checkbox" name="reason" value="宿舍没有营造良好的休息环境" /><span
							class="votechoicename">宿舍没有营造良好的休息环境</span>
					</li>
					<li><input type="checkbox" name="reason" value="外界的噪音" /><span class="votechoicename">外界的噪音</span>
					</li>
				</ul>
			</div>
			<div class="votechoice">
				<ul class="vote5">
					<p>*11.您是否感到熬夜会对您造成以下伤害?(多选)</p>
					<li><input type="checkbox" name="damage" value="头痛" /><span class="votechoicename">头痛</span>
					</li>
					<li><input type="checkbox" name="damage" value="腰酸背痛" /><span class="votechoicename">腰酸背痛</span>
					</li>
					<li><input type="checkbox" name="damage" value="精神不振" /><span class="votechoicename">精神不振</span>
					</li>
					<li><input type="checkbox" name="damage" value="注意力不集中" /><span class="votechoicename">注意力不集中</span>
					</li>
				</ul>
			</div>
			<button class="button" type="button">提交</button>
		</div>
	</div>
</body>

<script type="text/javascript">
	cocoMessage.config({
		duration: 1000,
	});//消息提示插件
	$(".button").click(() => {//点击提交按钮
		if (!$("input[name='sex']:checked").val() || !$("input[name='age']").val() ||
			!$("input[name='during']:checked").val() || !$("input[name='why']:checked").val() ||
			!$("input[name='type']:checked").val() || !$("input[name='days']:checked").val() ||
			!$("input[name='time']:checked").val() || !$("input[name='state']:checked").val() ||
			!$("input[name='health']:checked").val() || !$("input[name='damage']:checked").val() ||
			!$("input[name='reason']:checked").val()) {
			//使用jQuery获取单选按钮radio的选中值，如果有一个没有值，则执行if后面的代码
			return cocoMessage.error("请检查是否全部已经选择");//没有全部选中时，跳出弹窗
		} else {//全部选择时执行
			let data = {//定义一个data对象
				sex: $("input[name='sex']:checked").val(),
				age: $("input[name='age']").val(),
				during: $("input[name='during']:checked").val(),
				state: $("input[name='state']:checked").val(),
				health: $("input[name='health']:checked").val(),
				why: [],
				reason: [],
				damage: [],
				days: $("input[name='days']:checked").val(),
				type: $("input[name='type']:checked").val(),
				time: $("input[name='time']:checked").val(),//给每个data对象的成员变量赋值
			}
			$("input[name='why']:checked").each(function () {
				//复选按钮，jQuery 的 each() 函数用来遍历目标 jQuery 对象中的所有元素。
				data.why.push($(this).val());//向数组中添加元素
			});
			$("input[name='reason']:checked").each(function () {
				data.reason.push($(this).val());//向数组中添加元素
			});
			$("input[name='damage']:checked").each(function () {
				data.damage.push($(this).val());//向数组中添加元素
			});
			$.post('update.php', data, res => {//传送到updata.php
				let { status } = JSON.parse(res);//JSON.parse()之可以解析json格式的数据，
				//并且会对要解析的字符串进行格式检查，如果格式不正确则不进行解析，而eval()则可以解析任何字符串，eval是不安全的。
				if (status) {
					cocoMessage.success("添加成功");//添加成功
					setTimeout(() => {
						location.href = "form.html"//跳转到form页面
					}, 2000)
				} else {
					cocoMessage.error("添加失败,请重试");//添加失败提示
				}
			})
		}
	});
</script>

</html>